<template>
    <div class="pre-view">
        <!-- 行容器 -->
        <div class="container" v-for="(one) in pageInfo.info" :key="one.id">
            <RenderLayoutComponent v-if="one.componentTypeType === 'layout' || one.componentTypeType === 'fixed'" :class="['container', {'fixed': one.componentTypeType === 'fixed' }]" :item="one" @changeItem="setPropsValue($event, one)">
               <!-- <template v-if="one['children'] && one['children'].length > 0"> -->
                    <template v-for="(two) in one.children" :key="two.id">
                        <!-- 列容器或其他非布局容器  -->
                      <RenderLayoutComponent v-if="two.componentTypeType === 'layout'" :class="['container']" :item="two" @changeItem="setPropsValue($event, two)">
                            <!-- <template v-if="two['children'] && two['children'].length > 0"> -->
                                <template v-for="(three) in two.children" :key="three.id">
                                   <RenderContainer :class="['container no-layout']" v-show="showComponent(three)" :item="three"></RenderContainer>
                                </template>
                            <!-- </template> -->
                            
                        </RenderLayoutComponent>
                        <template v-else>
                            <RenderContainer v-show="showComponent(two)" :class="['container no-layout']" :item="two"></RenderContainer>
                        </template>
                    </template>
                <!-- </template> -->
            </RenderLayoutComponent>
            <template v-else>
                <!-- 工具栏 -->
                <RenderContainer :class="['container no-layout']" :item="one.element"></RenderContainer>
            </template>
        </div>
        <iframe id="iframe" src="http://localhost:8096/#/proj-manage?messageStatus=iframe&id=7724" width="1200" height="700" frameborder="0"></iframe>
    </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex'
import { basicPage } from '@/api/index.js'
import { ElMessage } from 'element-plus'
import RenderContainer from '@/components/common/RenderContainer.vue'
import RenderLayoutComponent from '@/components/common/RenderLayoutComponent.vue'
import yunApi from 'static/js/toolApi.js'
export default {
    components: {
        RenderContainer,
        RenderLayoutComponent
    },
    setup() {
        const store = useStore(); // 使用useStore方法
        const userInfo = computed(() => store.state.userInfo);
        const loginStatus = computed(() => store.state.loginStatus);
        let showGlobalStatus = ref({}) // 全局事件
        // 页面信息
        let pageInfo = ref({
            id: '',
            mate: '',
            pageName: '',
            info: []
        })
        function getPageInfo(id) {
            let params = {
                id: id,
                userId: userInfo.value.userId
            }
            basicPage.getPageInfoById(params).then(res => {
                if (res.status === 1) {
                    pageInfo.value.id = res.data.list.id
                    pageInfo.value.mate = res.data.list.mate
                    pageInfo.value.pageName = res.data.list.pageName
                    pageInfo.value.info = JSON.parse(res.data.list.pageInfo)
                } else {
                    ElMessage({
                        message: '预览页面失败',
                        type: 'error'
                    })
                }
                console.log('pageInfo', pageInfo.value)
            })
        }
        // 修改属性值
        function setPropsValue(e, item) {
            item.attribute[e.key].value = e.value
        }
        // 判断是否显示
        function showComponent(obj) {
            if (obj.attribute['vIfComponent'] && obj.attribute['vIfComponent'].value !== '') {
                let temp = JSON.parse(obj.attribute['vIfComponent'].value)
                return temp.event === showGlobalStatus.value.event && temp.key === showGlobalStatus.value.key && temp.value === showGlobalStatus.value.value
            }
            return true
        }
        yunApi.zl_on_event('showComponent', window, (e) => {
            showGlobalStatus.value = {
                event: 'showComponent',
                key: e.detail.key,
                value: e.detail.value
            }
        })
        return {
            getPageInfo,
            pageInfo,
            setPropsValue,
            showComponent,
            showGlobalStatus
        }
    },
    created() {
        let query = this.$route.query
        console.log(this.$route.query)
        if (query) {
            this.getPageInfo(query.id)
        }
        this.$nextTick(() => {
            let iframe = document.querySelector('#iframe')
            iframe.onload = (e) => {
                var receiver = iframe.contentWindow;
                receiver.postMessage({statusRender: 'start'}, "http://localhost:8096");
            }
        })
    },
}
</script>

<style scoped lang="less">
    .pre-view {
        min-height: 100%;
    }
    #iframe {
        border: 1px solid red;
    }
</style>
